<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/tt.css">
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-spit-index.css" />

    <title>测试历史</title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="./js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div style="height:100px;background-color:black;color:white;text-align:center;font-size:35px;margin-top: 10px">
    我的历史测试记录
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div class="wrapper tag-item">
        <div class="fl left-list">
            <div class="tc-data-list">
                <div class="tc-list">
                    <ul class="detail-list" v-for=" paper in papers">
                        <li class="qa-item">
                            <div class="fl record">
                                <div class="number">
                                    <div class="border answer">
                                        <p class="usenum"></p>
                                        <p class="zannum"><strong> 试卷</strong> </p>
                                    </div>
                                    <hr/>
                                </div>
                            </div>
                            <div class="info">
                                <p class="text">
                                    编号：<b>{{paper.id}}</b>
                                </p>
                                <div class="other">
                                    <div class="fl date">
                                        <span>
                                            考试时间：<b>{{paper.createTime}}</b>

                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="fr remark">
                                <el-form-item>
                                    <el-button type="primary" @click="deletePaper(paper.id)">删除</el-button>
                                </el-form-item>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</el-form>
</div>

<script>
    /* 脚本中创建对象,处理业务 */
    new Vue({
        el: '#app',
        data: {
            papers:[],
        },
        methods: {
            findHistory(){
                alert("find History");
                //1.定义localStorage
                let storage = window.localStorage;
                //2.取出认证id
                let authorization = storage.loginInfo;
                //3.判断有没有认证信息
                if(loginInfo == undefined){
                    window.open('./index.html','_self');
                    return;
                }
                //4.发送请求，获取数据
                let _this = this;
                axios.post('/member/myExaminationPaper', '{"id":"'+loginInfo+'"}').then(function (response) {
                    let res = response.data.data;
                    alert(JSON.stringify(res.rows));
                    _this.papers = res.rows;
                }).catch(function (err) {
                    console.log(err)
                });
            },
            deletePaper(id){
                axios.post('/exam/deleteExaminationPaper', '{"id":"'+id+'"}').then(function (response) {
                    let res = response.data;
                    alert(res.message);
                   location.reload();
                }).catch(function (err) {
                    console.log(err)
                });
            }
        },
        created(){
            this.findHistory();
        }

    });
</script>



</body>

</html>